<template>
  <div class="card">
    <div class="card-body">
      <h5 class="font-weight-bold mb-5">单位信息</h5>

      <div class="media mt-3 mb-3">
        <el-image :src="orgImage" class="header-image mr-3">
          <div slot="error" class="image-slot">
            <i class="el-icon-picture-outline"></i>
          </div>
        </el-image>
        <div class="media-body">
          <h5 class="mt-0">
            <b>
              {{ orgData.orgName }}
              <span v-if="orgData.orgNameShort">（{{ orgData.orgNameShort }}）</span>
            </b>
          </h5>
          <p>
            <b>地址：{{ orgData.addressDetail }}</b>
          </p>
          <p>
            <b>简 介：{{ orgData.orgDescription }}</b>
          </p>
          <p>
            <b>户 名：{{ orgData.accountName }}</b>
          </p>
          <p>
            <b>开户行：{{ orgData.openBank }}</b>
          </p>
          <p>
            <b>账 号：{{ orgData.accountNo }}</b>
          </p>
          <p>
            <b>联合担保协议签订日期：{{ orgData.joinDate }}</b>
          </p>
          <p>
            <b>联合担保协议编号：{{ orgData.joinNo }}</b>
          </p>
          <button
            type="button"
            v-if="isManage"
            class="btn btn-sm btn-outline-primary"
            @click="handleEdit"
          >
            修 改
          </button>
        </div>
      </div>
    </div>

    <company-modify :visible.sync="orgVisible"></company-modify>
  </div>
</template>
<script>
import CompanyModify from './CompanyModify'
import { IMG_DEFAULT } from '@/common/plugins/constant'
import { mapGetters } from 'vuex'
export default {
  components: {
    CompanyModify,
  },
  props: {},
  data() {
    return {
      orgVisible: false,
      orgPut: {},
    }
  },
  computed: {
    ...mapGetters(['user']),
    isManage() {
      return (
        ['org_corp', 'org_credit_super'].includes(this.$store.getters.user.job) ||
        this.user.scopeArr.includes('agencyM')
      )
    },
    orgData() {
      return this.$store.getters.org
    },

    orgImage() {
      let images = this.orgData.orgImages
      if (images) {
        let arr = images.replace(/^\["(\S+)"\]$/, '$1').split('","')
        return arr.length ? arr[0] : IMG_DEFAULT
      } else {
        return IMG_DEFAULT
      }
    },
  },
  watch: {},
  created() {},
  mounted() {},
  methods: {
    handleEdit() {
      this.orgVisible = true
    },
  },
}
</script>
<style scoped lang="scss">
/deep/ .image-slot {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100%;
  background: #f5f7fa;
  color: #909499d6;
  font-size: 60px;
}
.header-image {
  width: 150px;
  height: 150px;
}
</style>
